<template>
	<view>
		<uni-nav-bar title="订单评价" @clickLeft="back" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true"></uni-nav-bar>
			
		<scroll-view class="scrollheight" scroll-y="true" :style="{height:setcollapseheight() - height + 'px'}">
			<view class="main">
				<view class="item">
					<view class="title-line"></view>
					<view class="title">
						<template v-if="disabled">
							{{templateDataList.length > 0 ? templateDataList[0].name : '服务人评价内容'}}
						</template>
						<template v-else>
							{{templateDataList.length > 0 ? templateDataList[0].questionName : '服务人评价内容'}}
						</template>
					</view>
					<view class="baseline"></view>
					<view class="service">
						<view class="score">
							服务评分
						</view>
						<view class="rate">
							<uni-rate allow-half size="16" :value="formData.rate1" @change="changeRate1" color="#bbb" active-color="red" :readonly="disabled"/>
						</view>
						<view class="result" v-if="formData.rate1 == 0">
							请选择评分
						</view>
						<view class="result" v-else-if="formData.rate1<=1 && formData.rate1>0">
							非常差
						</view>
						<view class="result" v-else-if="formData.rate1<=2 && formData.rate1>1">
							差
						</view>
						<view class="result" v-else-if="formData.rate1<=3 && formData.rate1>2">
							一般
						</view>
						<view class="result" v-else-if="formData.rate1<=4 && formData.rate1>3">
							好
						</view>
						<view class="result" v-else-if="formData.rate1>4 && formData.rate1 <= 5">
							非常好
						</view>
					</view>
					<u--textarea v-model="formData.value1" :disabled="disabled" placeholder="请输入评价内容"
						count></u--textarea>
					<view class="upload">
						<u-upload :fileList="fileList" :disabled="disabled" @afterRead="afterRead" @delete="deletePic"
							name="1" multiple :deletable="!disabled" :maxCount="3">
							<view style="display: flex;">
								<view class="text" v-show="!disabled">
									上传图片
								</view>
							</view>
						</u-upload>
					</view>
				</view>

				<view class="item">
					<view class="title-line"></view>
					<view class="title">
						<template v-if="disabled">
							{{templateDataList.length > 0 ? templateDataList[1].name : '机构评价内容'}}
						</template>
						<template v-else>
							{{templateDataList.length > 0 ? templateDataList[1].questionName : '机构评价内容'}}
						</template>
					</view>
					<view class="baseline"></view>
					<view class="service">
						<view class="score">
							服务评分
						</view>
						<view class="rate">
							<uni-rate allow-half size="16" :value="formData.rate2" @change="changeRate2" color="#bbb" active-color="red" :readonly="disabled"/>
						</view>
						<view class="result" v-if="formData.rate2 == 0">
							请选择评分
						</view>
						<view class="result" v-else-if="formData.rate2<=1 && formData.rate2>0">
							非常差
						</view>
						<view class="result" v-else-if="formData.rate2<=2 && formData.rate2>1">
							差
						</view>
						<view class="result" v-else-if="formData.rate2<=3 && formData.rate2>2">
							一般
						</view>
						<view class="result" v-else-if="formData.rate2<=4 && formData.rate2>3">
							好
						</view>
						<view class="result" v-else-if="formData.rate2>4 && formData.rate2 <= 5">
							非常好
						</view>
					</view>
					<u--textarea v-model="formData.value2" :disabled="disabled" placeholder="请输入评价内容"
						count></u--textarea>
					<view class="upload">
						<u-upload :fileList="fileList1" :disabled="disabled" @afterRead="afterRead1"
							@delete="deletePic1" name="1" multiple :deletable="!disabled" :maxCount="3">
							<view style="display: flex;">
								<view class="text" v-show="!disabled">
									上传图片
								</view>
							</view>
						</u-upload>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-button class="custom-style" text="提交评价" @click="submit" v-if="!disabled"></u-button>
	</view>
</template>

<script>
	import API from '@/api/socialized-servce/farm-service/normalUser/appraise-order/index.js'
	import {
		agrServiceUrl
	} from '@/config/baseUrl.js'
	export default {
		data() {
			return {
				serviceProjectNo: '',
				orderNo: '',
				disabled: false,
				templateDataList: [],
				formData: {
					rate1: 0,
					rate2: 0,
					value1: '',
					value2: '',
					imgList: [],
					imgList1: []
				},
				fileList: [],
				fileList1: [],
				height: 40,
				timer: null
			}
		},
		onLoad(e) {
			this.orderNo = e.orderId
			this.disabled = e.evaluated ? true : false
			if (e.evaluated === 'null') {
				this.disabled = false
			}
			this.serviceProjectNo = e.serviceProjectNo
		},
		created() {
			this.setcollapseheight()
			if (this.disabled) {
				this.height = 0
			}
			this.getEvaluationTemplate()
			if(this.disabled) {
				this.getEvaluationContent()
			}
		},
		methods: {
			changeRate1(e) {
				this.formData.rate1 = e.value
			},
			changeRate2(e) {
				this.formData.rate2 = e.value
			},
			async getEvaluationTemplate() {
				let res = await API.queryEvaluationTemplate(this.serviceProjectNo)
				if(res.code === 200) {
					this.templateDataList = res.data
				}
			},
			async getEvaluationContent() {
				let res = await API.queryEvaluationContent(this.orderNo)
				if(res.code === 200) {
					res.data.forEach((el,index)=>{
						if(index === 0) {
							this.formData.value1 = el.orderEvaluationType.desc
							this.formData.rate1 = el.starTypes[0].value
							el.orderEvaluationType.extra.forEach((el,index)=>{
								this.fileList.push({
									url: el,
									name: index
								})
								this.formData.imgList.push({
									imgUrl: el,
									imgId: index
								})
							})
						} else {
							this.formData.value2 = el.orderEvaluationType.desc
							this.formData.rate2 = el.starTypes[0].value
							el.orderEvaluationType.extra.forEach((el,index)=>{
								this.fileList1.push({
									url: el,
									name: index
								})
								this.formData.imgList1.push({
									imgUrl: el,
									imgId: index
								})
							})
						}
					})
				}
			},
			async submit() {
				let {value1,value2,rate1,rate2,imgList,imgList1} = this.formData
				let pictureList = []
				let pictureList1 = []
				imgList.forEach(el => pictureList.push(el.imgUrl))
				imgList1.forEach(el => pictureList1.push(el.imgUrl))
				if(rate1 === 0 || rate2 === 0) {
					uni.showToast({
						title: '请选择评分',
						icon: 'error'
					})
					return;
				}
				if(value1 === '' || value2 === '') {
					uni.showToast({
						title: '请输入评价内容',
						icon: 'error'
					})
					return;
				}
				let params = {
					orderNo: this.orderNo,
					evaluationTypeMap: {
						0: {
							pictureList: pictureList,
							description: value1,
							starMap: {
								0: rate1
							}
						},
						1: {
							pictureList: pictureList1,
							description: value2,
							starMap: {
								0: rate2
							}
						}
					}
				}
				let res = await API.appraiseOrder(params)
				if(res.code === 200) {
					this.timer = setTimeout(()=>{
						uni.showToast({
							title: '评价成功',
							icon: 'success'
						})
					},500)
					uni.redirectTo({
						url: '/subPage1/socialized-service/farm-service/normalUser/myOrder/myOrder'
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(136)
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				let oldHeight = uni.upx2px(136)

				winHeight = parseInt(winHeight) - topheightone
				// #ifndef H5
				winHeight = winHeight - 10

				// #endif
				return winHeight
			},
			async afterRead(event) {
				this.type = 'image'
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: `${agrServiceUrl}${result.slice(1)}`
					}))
					fileListLen++
				}
			},
			async afterRead1(event) {
				this.type = 'image1'
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList1[fileListLen]
					this.fileList1.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: `${agrServiceUrl}${result.slice(1)}`
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: agrServiceUrl + `common/file/upDown/getUploadUrl?moduleType=XG_ORGANIZATION&upDownType=FTP`,
						filePath: url,
						name: 'file',
						header: {
							'token': uni.getStorageSync("satoken") || ''
						},
						formData: {},
						success: async (res) => {
							const dataObj = JSON.parse(res.data);
							const data = dataObj.data;
							console.log(data, 'ww');
							resolve(data);
							if (this.type == 'image') {
								this.formData.imgList.push({
									imgId: data.slice(33),
									imgUrl: `${agrServiceUrl}${data.slice(1)}`
								})
							} else if (this.type == 'image1') {
								this.formData.imgList1.push({
									imgId: data.slice(33),
									imgUrl: `${agrServiceUrl}${data.slice(1)}`
								})
							}
						},
						fail: () => {
							uni.showToast({
								title: '图片上传失败',
								icon: 'error'
							})
						}
					});
				})
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.formData.imgList.splice(event.index, 1)
			},
			deletePic1(event) {
				this.fileList1.splice(event.index, 1)
				this.formData.imgList1.splice(event.index, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin: 0 40rpx;

		.item {
			position: relative;
			width: 670rpx;
			height: 506rpx;
			margin-top: 26rpx;
			padding-top: 36rpx;
			background: #FFFFFF;
			box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
			border-radius: 10rpx;

			.title-line {
				position: absolute;
				left: 0;
				top: 40rpx;
				width: 10rpx;
				height: 32rpx;
				background: #91743E;
			}

			.title {
				width: 100%;
				margin-left: 24rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #91743E;
			}

			.service {
				display: flex;
				align-items: center;
				margin-top: 18rpx;
				padding-left: 24rpx;

				.score {
					margin-right: 16rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #606060;
				}

				.result {
					margin-left: 20rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #BABABA;
				}
			}

			.upload {
				height: 96rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				.text {
					font-size: 24rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #2265FB;
					text-decoration: underline;
				}
			}
		}
	}

	.baseline {
		margin-top: 20rpx;
		width: 100%;
		height: 2rpx;
		background: #EFEFEF;
	}

	/deep/ .u-textarea {
		position: relative;
		width: 580rpx;
		height: 200rpx;
		margin-left: 24rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		opacity: 1;
		border: 1px solid #EAEAEA;
		border-color: red;
	}

	/deep/ .u-textarea__field {
		height: 200rpx !important;
	}

	/deep/.u-button {
		position: fixed !important;
		bottom: 30rpx !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: 346rpx !important;
		height: 58rpx !important;
		color: #fff !important;
		background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);
		box-shadow: 0px 0px 8rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 30rpx !important;
		box-sizing: border-box !important;
	}

	/deep/ .u-upload__wrap {
		display: flex;
		padding-left: 20rpx;
		align-items: center;
	}

	/deep/ .u-upload__wrap__preview__other {
		height: 80rpx !important;
		width: 80rpx !important;
	}

	/deep/ .u-upload__deletable {
		z-index: 999999999 !important;
	}
</style>